<template>
	<view class="page">
		<view class="tit" v-if="order_detail.audit>0">
			<view class="">审核状态：{{order_detail.audit ==1 ? '审核中' : (order_detail.audit ==2 ? '已通过' : '未通过')}}</view>
			<view class="">审核意见：{{order_detail.reason ? order_detail.reason : ''}}</view>
			<view class="">处理时间：{{order_detail.audit_time ? order_detail.audit_time : ''}}</view>
			<image class="tatus_img" v-if="order_detail.audit==1" src="../../static/pagesA-img/images/shenhezhong.png" mode="widthFix"></image>
			<image class="tatus_img" v-if="order_detail.audit==2" src="../../static/pagesA-img/images/yitongguo.png" mode="widthFix"></image>
			<image class="tatus_img" v-if="order_detail.audit==3" src="../../static/pagesA-img/images/weitongguo.png" mode="widthFix"></image>
		</view>
		<view class="title">订单总价：</view>
		<view class="tit">
			<view class="">金额</view>
			<view class="money">¥{{order_detail.real_payments / 100}}<text class="nopay" v-if="order_detail.status<2">（未支付）</text><text class="payed" v-if="order_detail.status>1">（已支付）</text></view>
			<view class="pay-msg" v-if="order_detail.status>1">
				<view class="">支付人：{{order_detail.consumer_nickname}}</view>
				<view class="">支付时间：{{order_detail.update_time}}</view>
				<view class="">支付类型：{{(order_detail.pay_category==1) ? "全款支付" : "预付款"}}</view>
			</view>
		</view>
		<view class="title" v-if="order_detail.images.length>0">图片凭证：</view>
		<view class="tit" v-if="order_detail.images.length>0">
			<scroll-view scroll-x="true" >
				<view class="scroll_box">
					<view class="img-box" v-for="(item,index) in order_detail.images" :key="index" @click="showPreviewImg(item)"><image :src="item" class="img" mode="aspectFit"></image></view>
				</view>
			</scroll-view>
		</view>
		<view class="title">订单备注：</view>
		<view class="tit">
			<view class="">{{order_detail.remark ? order_detail.remark : '暂无备注'}}</view>
		</view>
		<view class="empty"></view>
		<view v-if="order_detail.status>1" class="btn-box" @click="goReceipt">查看电子收据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id:0,
				order_detail:{}
			}
		},
		onLoad(e) {
			var self = this;
			this.order_id = e.id;
			this.$request.request({
				url:'/order/offline/info',
				data:{
					order_id:self.order_id
				},
				success:function(res){
					if(res.code==200){
						let x = res.result;
						x.images = JSON.parse(x.images);
						console.log(x)
						self.order_detail = x
					}
				}
			})
		},
		methods: {
			showPreviewImg(url){
				uni.previewImage({
					urls:this.order_detail.images,
					current:url
				})
			},
			goReceipt(){
				uni.navigateTo({
				    url: '../canvas_order/canvas_order?id='+this.order_id
				});
			}
		}
	}
</script>

<style scoped>
.page{
	width: 750upx;
	min-height:100vh;
	box-sizing: border-box;
	padding: 15upx;
	background-color: #efefef;
}
.tit{
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 30upx;
	border-radius: 20upx;
	background-color: #FFFFFF;
}
.title{
	font-size: 16px;
	margin: 20upx 0;
}
.pay-msg{
	display: flex;
	flex-direction: column;
	/* justify-content: space-between; */
}
.money{
	width: 100%;
	border-bottom:1px solid #efefef ;
	text-align: center;
	font-size: 18px;
}
.payed{
	color: #62b1fa;
}
.nopay{
	color: red;
}
.scroll_box{
	display: flex;
	width: 660upx;
	flex-direction: row;
	justify-content: flex-start;
}
.img-box{
	width: calc(620upx / 3);
	height:calc(620upx / 3);
	background-color: #efefef;
	border-radius: 20upx;
	margin-right: 20upx;
}
.img{
	width: calc(620upx / 3);
	height:calc(620upx / 3);
}
.tatus_img{
	position: absolute;
	width: 80upx;
	right: 30upx;
	top:30upx
	
}
.empty{
	width: 100%;
	height: 80upx;
}
.btn-box{
	position: fixed;
	width: 100%;
	height: 80upx;
	left: 0;
	bottom: 0;
	color: #FFFFFF;
	background-color: #859dc2;
	text-align: center;
	line-height: 80upx;
	font-size: 14px;
}
</style>
